<template>
    <div class="login">
        <input class="shuru" placeholder="请输入账号" type="text" v-model="username"><br>
        <input class="shuru" placeholder="请输入密码" type="password" v-model="password"><br>
        <button class="login_button" @click="login">登录</button>
    </div>
</template>

<script>
import {reactive,toRefs} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
export default{
    setup(){
       const state=reactive({
           username:17858631522,
           password:''
       }) 
       const route=useRouter();
       const  login=async()=>{
        //    let url='http://localhost:3000/login/cellphone?phone='+state.username+'&password='+state.password
        //    await axios.get(url);
           
        //    let code=await axios.get('http://localhost:3000/login/status').then(res=>res.data.data.code);
        //    console.log(code);
        //    if(code==200) route.push({path:'/home'});
       }
       return{
           ...toRefs(state),
           login
       }
    } 
}
</script>

<style>
.login{
    width: 7.5rem;
    height: 13.34rem;
    background: url(../assets/login.jpg);
    background-size: cover;
}
.shuru{
    width: 4.2rem;
    height: 0.8rem;
    border-radius: 0.8rem;
    border: 0px;
    margin-top: 0.4rem;
    color: #000;
    font-weight: bold;
    font-size: 0.25rem;
    text-align: center;
    position: relative;
    left: 1.65rem;
    top: 7.5rem;
}
.login_button{
    margin-top: 0.4rem;
    width: 2rem;
    height: 0.8rem;
    /* border-radius: 0.8rem; */
    font-weight: bold;
    font-size: 0.25rem;
    text-align: center;
    border: 0px;
    position: relative;
    left: 2.7rem;
    top: 7.8rem;
   
}
</style>